<template>
    <div ref ="containerRef" class="container"></div>
</template>

<script setup lang="ts">
import { AxesHelper, BoxGeometry, Color, Mesh, MeshBasicMaterial, MeshLambertMaterial, PerspectiveCamera, PlaneGeometry, Scene, SphereGeometry, SpotLight, WebGLRenderer } from "three";
import {onMounted, ref} from "vue";

const containerRef = ref<HTMLElement>();

// 创建场景
const scene = new Scene();
// 创建摄像机，并设置位置
const camera= new PerspectiveCamera(45, window.innerWidth/window.innerHeight,0.1,1000);
camera.position.set(-30,40,30);
// 设置摄像机朝向
camera.lookAt(scene.position)

// 创建渲染器
const renderer= new WebGLRenderer()
renderer.setClearColor(new Color(0xeeeeee))
renderer.setSize(window.innerWidth,window.innerHeight)
renderer.shadowMap.enabled = true


// 添加灯光
const spotLight = new SpotLight(0xffffff)
spotLight.castShadow= true
spotLight.position.set(-40,60,-10)
scene.add(spotLight)

onMounted(() => {
    containerRef.value?.appendChild(renderer.domElement)
    renderer.render(scene,camera)
})

// 添加坐标轴
const axes = new AxesHelper(20)
scene.add(axes)

const planeGeom = new PlaneGeometry(60,20)
const meshMaterial = new MeshLambertMaterial({color: 0xcccccc})
const plane = new Mesh(planeGeom,meshMaterial)
plane.position.x=15
plane.position.y=0
plane.position.z=0
plane.rotation.x = -0.5 * Math.PI
plane.receiveShadow = true
scene.add(plane);

const cubeGeom = new BoxGeometry(4,4,4)
const cubeMaterial = new MeshLambertMaterial({color:0xff0000,wireframe:false})
const cube = new Mesh(cubeGeom,cubeMaterial)
cube.castShadow = true

cube.position.set(2,2,2)

scene.add(cube);

const sphereGeom = new SphereGeometry(4)
const sphereMaterial = new MeshLambertMaterial({color:0x7777ff,wireframe:false})
const sphere = new Mesh(sphereGeom,sphereMaterial)
sphere.castShadow = true

sphere.position.x=20
sphere.position.y=4
sphere.position.z=2

scene.add(sphere);

let step = 0;

// function renderScene() {
//     cube.rotation.x += 0.02;
//     cube.rotation.y += 0.02;
//     cube.rotation.z += 0.02;

//     step+= 0.04;
//     sphere.position.x = 20+10*Math.cos(step)
//     sphere.position.y = 2+10*Math.abs(Math.sin(step))

//     requestAnimationFrame(renderScene)
//     renderer.render(scene,camera)
// }
// renderScene()

</script>

<style scoped>
    .tab{
        width:100px
    }
</style>
